<template>
 <div class="top-wrapper" >
   <div  class="tip-title">请填写您的身份信息</div>
  <mt-field label="姓名" placeholder="请输入您的真实姓名" v-model="username"></mt-field>
<mt-field label="手机号" placeholder="请输入您的手机号" type="phone" v-model="phone"></mt-field>
<mt-field label="身份证号" placeholder="请输入18位身份证号" type="email" v-model="idcard"></mt-field>
 <mt-field label="所在单位"     placeholder="请输入您的单位名称(选填)" type="people" v-model="department"></mt-field>
 <mt-field label="职务"     placeholder="请输入您的职务名称(选填)" type="people" v-model="job"></mt-field>
 <mt-button class="btn" @click="confirm" type="primary">提交</mt-button>

 </div>
</template>

<script>
import { MessageBox,Toast  } from 'mint-ui';
export default {
  name: "Index",
  data() {
    return {
      sheetVisible: false,
      department: "",
      username: "",
      phone: "",
      pickerValue: "2018-07-20 00:00:00",
     job:"",
     idcard:""
    };
  },
  methods: {
    openPicker() {
      this.$refs.picker.open();
    },
    visitFor(){
        this.sheetVisible=true
    },
    confirm(e) {
    MessageBox('预约须知', '访客需与被访人提前联系，预约好时间后发起预约申请，如有疑问请联系公众号客服。').then((res)=>{
    Toast({
  message: '提交成功',
  iconClass: 'iconfont icon-success1'
});
    })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top-wrapper{
   position: absolute;
    top:0;
    width: 100%;
    background: rgb(245, 245, 245);
    bottom: 0;
}
.btn {
  padding: relative;
  display: block;
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  color: white;
  border-radius: 30px;
}

.tip-title {
  position: relative;
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  padding-left: 18px;
  background: rgb(245, 245, 245);
}
.mint-field-core,
.mint-cell-value {
  position: relative;
  text-align: right;
}
input {
  position: relative;
  text-align: right;
}
</style>
